﻿<!-- version 11:07_22.09.2010 -->





<!DOCTYPE html>
<html >
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
        *{
          margin: 0;
          padding: 0;
        }
        html, body{
          height: 100%;
          width: 100%;
        }

        .top_buttons_area{
          /*background-color: #a5aaae;*/
		  background: -moz-linear-gradient(100% 100% 90deg, #626971, #9ca1a6) repeat scroll 0 0 transparent;
          background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9ca1a6), to(#626971));
          width: 100%;
          height: 36px;
          position: fixed;
          top: 0;
          left: 0;
          margin: 0 auto 0 auto;
          z-index: 3000;
        }
        .canvas_area{
          background-color: #666699;
          width: 100%;
          height: 100%;
          position: relative;
          z-index: 1000;
        }
        .canvas{
          padding-top: 80px;
          z-index: 2000;
          /*width: 100%;
          height: 100%;*/
          background-color: #CCFF99;
        }

        a{
          -webkit-border-radius: 11px 11px 11px 11px;
          -moz-border-radius: 11px 11px 11px 11px;
		  -webkit-box-shadow: 0 1px 0 #AAAAAA;;
		  -moz-box-shadow: 0 1px 0 #AAAAAA;;
          
		  
		  background: -moz-linear-gradient(100% 100% 90deg, #0071ae, #1aa9d0) repeat scroll 0 0 transparent;
          background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1aa9d0), to(#0071ae));
          border: 1px solid #006782;
          color: #FFFFFF;
          font-family: Arial;
          font-size: 12px;
          padding: 2px 8px;
          position: relative;
          text-decoration: none;
          text-shadow: 1px 1px 2px #444444;
          float: left;
          height: 16px;
          outline: 0;
          margin: 2px; float: left;
        }
        a:hover{
          -webkit-border-radius: 11px 11px 11px 11px;
          -moz-border-radius: 11px 11px 11px 11px;
		  -webkit-box-shadow: 0 0 2px #666;
		  -moz-box-shadow: 0 0 2px #666;
		  
		  background: -moz-linear-gradient(100% 100% 90deg, #0093c0, #1aa9d0) repeat scroll 0 0 transparent;
          background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1aa9d0), to(#0093c0));
		  
          color: #fff;
        }
        a:active{
          -webkit-border-radius: 11px 11px 11px 11px;
          -moz-border-radius: 11px 11px 11px 11px;
           background: -moz-linear-gradient(100% 100% 90deg, #1aa9d0, #6bc3dd) repeat scroll 0 0 transparent;
           background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6bc3dd), to(#1aa9d0));
		   color: #fff;
		   -webkit-box-shadow: 0 0 0;
		   -moz-box-shadow: 0 0 0;
        }
        .menu{
          position: absolute; top: 0; left: 0;
          -webkit-border-radius: 11px 11px 11px 11px;
          -moz-border-radius: 11px 11px 11px 11px;
          background: -moz-linear-gradient(100% 100% 90deg, #666666, #888888) repeat scroll 0 0 transparent;
          background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#888888), to(#666666));
          border: 1px solid #444444;
          margin: 2px 2px;
          display: none;
          -webkit-box-shadow: 0 0 8px #666;
          -moz-box-shadow: 0 0 8px #666;
        }
        .popup:hover .menu{
          display: block;
        }

        .menu a{
          position: relative;
          -webkit-border-radius: 0;
          -moz-border-radius: 0;
		  -webkit-box-shadow: none;
		  -moz-box-shadow: none;
          background: none;
          border: 0;
          margin: 0;
        }
		
		.menu a:hover{
          /*-webkit-border-radius: 11px 11px 11px 11px;
          -moz-border-radius: 11px 11px 11px 11px;
          background: -moz-linear-gradient(100% 100% 90deg, #ffffff, #eeeeee) repeat scroll 0 0 transparent;
          background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eeeeee), to(#fffffff));
		  background-color: white;
          color: #585b5d;
		  text-shadow: 1px 1px 2px #888888;*/

		  -webkit-border-radius: 11px 11px 11px 11px;
          -moz-border-radius: 11px 11px 11px 11px;
		  -webkit-box-shadow: 0 0 2px #666;
		  -moz-box-shadow: 0 0 2px #666;
		  
		  background: -moz-linear-gradient(100% 100% 90deg, #0093c0, #1aa9d0) repeat scroll 0 0 transparent;
          background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1aa9d0), to(#0093c0));
        }

		.active{ color:#f00; }
		
		.size_canvas_controls{ height: 8px; width: 8px; }
		.size_canvas_controls:hover{ border-color: #444 !important}
		.size_canvas_controls.nw_resize{ border-left:  1px solid #999999; border-top: 1px solid #999999; cursor: nw-resize; margin: 0 4px 4px 0; }
		.size_canvas_controls.ne_resize{ border-right: 1px solid #999999; border-top: 1px solid #999999; cursor: ne-resize; margin: 0 0   4px 4px; }
		.size_canvas_controls.sw_resize{ border-left:  1px solid #999999; border-bottom: 1px solid #999999; cursor: sw-resize; margin: 4px 4px 0 0; }
		.size_canvas_controls.se_resize{ border-right: 1px solid #999999; border-bottom: 1px solid #999999; cursor: se-resize; margin: 4px 0 0 4px; }
		.size_canvas_controls.n_resize { border-top:   1px solid #999999;                                cursor: n-resize;  margin: 0 auto   4px auto; width: 16px; }
		.size_canvas_controls.e_resize { border-right: 1px solid #999999; 								 cursor: e-resize;  margin: auto 0 auto 4px; height: 16px; }
		.size_canvas_controls.s_resize { border-bottom:1px solid #999999;                                cursor: n-resize;  margin: 4px auto 0 auto; width: 16px; }
		.size_canvas_controls.w_resize { border-left:  1px solid #999999; 								 cursor: w-resize;  margin: auto 4px auto 0; height: 16px; }
		
    </style>
	<link rel="stylesheet" href="colorpicker/css/colorpicker.css" type="text/css" />
</head>
<body style="background-color: #eee;">



    <div class="top_buttons_area">
        <div style="position: relative; height: 100%; width: 100%; padding: 4px;">
            <a href="#">редактировать</a>
            <a class="add" href="#">добавить</a>
            <div style="float: left; position: relative;" class="popup">
                            <a href="#" >Файл</a>
                            <div class="menu">
                                <div style="margin:0 0 2px 0;"><a href="#" class="load">Открыть</a></div>
                                <div style="margin:0 0 2px 0;"><a href="#" class="save">Сохранить</a></div>
                                <div style="margin:0 0 2px 0;"><a href="#">Отправить</a></div>
                            </div>
            </div>
        </div>
    </div>
    
        
            <center>
				<table border="0" cellpadding="0" cellspacing="0" style="margin:60px auto 10px;">
					<tr>
						<td><div class="size_canvas_controls nw_resize"></div></td>
						<td><div class="size_canvas_controls n_resize"></div></td>
						<td><div class="size_canvas_controls ne_resize"></div></td>
					</tr>
					<tr>
						<td><div class="size_canvas_controls w_resize"></div></td>
						<td><canvas id="canvas_demo" width="1000" height="1000" style=" -moz-box-shadow: 0 0 8px #888888;background-color: #FFFFFF; border: 0 none; margin: 0 auto; "></canvas></td>
						<td><div class="size_canvas_controls e_resize"></div></td>
					</tr>
					<tr>
						<td><div class="size_canvas_controls sw_resize"></div></td>
						<td><div class="size_canvas_controls s_resize"></div></td>
						<td><div class="size_canvas_controls se_resize"></div></td>
					</tr>
				</table>
            </center>
       
   



<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery.ext.js"></script>
	

<script type="text/javascript" src="colorpicker/js/colorpicker.js"></script>
<script language="JavaScript" type="text/javascript" src="esboza_core.js"></script>
<script language="JavaScript" type="text/javascript" src="esboza_studio.js"></script>
<script language="JavaScript" type="text/javascript">
	$(document).ready(function(){
		/*var innerHeight = $('body').innerHeight();
		var innerWidth = $('body').innerWidth();
		$('#canvas_demo').attr('height', innerHeight);
		$('#canvas_demo').attr('width', innerWidth);
		esb.canvas_offset = $('#canvas_demo').offset();//после добавления появляются скролы, поэтому нужно пересчитать offset'ы
		*/
		$(window).resize(function() {
			esb.canvas_offset = $('#canvas_demo').offset();
			//var innerHeight = $('body').innerHeight();
			//var innerWidth = $('body').innerWidth();
			//$('#canvas_demo').attr('height', innerHeight);
			//$('#canvas_demo').attr('width', innerWidth);
		});
	});

    $(window).load(function(){
        esb.trigger('load')
    });
</script>






<!--<div id="delta_x">render</div>
<div id="delta_y">render</div>
<div id="render" style="" next_color="#f00" current_color="#0f0">render</div>-->
<div id="buffers_click" style="    left: 800px;
    position: fixed;
    top: 100px;
    z-index: 10000;
	background: #fff;"></div>
	
<div id="esb_list" style="    left: 800px;
    position: fixed;
    top: 150px;
    z-index: 10000;
	background: #eff;"></div>


</body>
</html>
